import { defineComponent, reactive } from 'vue'
import source from './style/source.module.scss'
import listComponent from '@/components/list-component'
import modelDialog from './component/mdelDialog'
import { useRouter } from 'vue-router'
export default defineComponent({
  props: {},
  emits: [],
  components: {},
  setup(props, ctx) {
    const data = reactive({
      tableData: [],
      loading: false,
      visible: false
    })
    const router = useRouter()
    const face = [
      {
        prop: 'linkName',
        label: '数据模型名称'
      },
      {
        prop: 'userName',
        label: '创建人'
      },
      {
        prop: 'dbIp',
        label: '数据源'
      },
      {
        prop: '',
        label: '操作'
      }
    ]
    const buildChange = () => {
      data.visible = !data.visible
    }
    //测试跳转数据模型配置
    const testChange = () => {
      router.push({
        name: 'data-model-details',
        query: {
          id: '111'
        }
      })
    }
    /* 
    渲染函数
    */
    const tableRender = (item) => {
      if (item.label === '操作')
        return (
          <el-table-column
            label={item.label}
            v-slots={{
              default: ({ row }) => {
                return (
                  <>
                    <el-button size="small" type="primary" onClick={() => editChange(row.id)}>
                      编辑
                    </el-button>
                    <el-button size="small" type="primary" onClick={() => deleteChange(row.id)}>
                      删除
                    </el-button>
                  </>
                )
              }
            }}
          ></el-table-column>
        )
      else return <el-table-column prop={item.prop} label={item.label} />
    }
    const editChange = () => {}
    const deleteChange = () => {}
    return () => (
      <>
        <modelDialog visible={data.visible}></modelDialog>
        <listComponent
          v-slots={{
            left: () => {
              return <p>数据模型配置</p>
            },
            right: () => {
              return (
                <>
                  <el-button size="small" type="primary" onClick={testChange}>
                    测试
                  </el-button>
                  <el-button size="small" type="primary" onClick={buildChange}>
                    创建
                  </el-button>
                </>
              )
            }
          }}
        >
          <div class={source.model_main}>
            <el-table data={data.tableData} border v-loading={data.loading}>
              {face.map((item, index) => tableRender(item))}
            </el-table>
          </div>
        </listComponent>
      </>
    )
  }
})
